<template>
  <div>
    <div class="form-preview">
      <div class="form-header">
      </div>
      <div class="form-body">
        <v-form-render
          :form-json="formJson"
          :form-data="formData"
          :option-data="optionData"
          ref="vFormRef"
        /></div>
      <div class="form-footer">
        <el-button type="primary" @click="submitForm">Submit</el-button>
      </div>
    </div>
  </div>
</template>

<script setup type="ts">
defineOptions({name: 'FormV3Viewer'})


const formJson = reactive({
  widgetList: [],
  formConfig: {
    modelName: 'formData',
    refName: 'vForm',
    rulesName: 'rules',
    labelWidth: 80,
    labelPosition: 'left',
    size: '',
    labelAlign: 'label-left-align',
    cssCode: '',
    customClass: '',
    functions: '',
    layoutType: 'PC',
    jsonVersion: 3,
    onFormCreated: '',
    onFormMounted: '',
    onFormDataChange: ''
  }
})
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)

const submitForm = () => {
  vFormRef.value
    .getFormData()
    .then((formData) => {
      // Form Validation OK
      alert(JSON.stringify(formData))
    })
    .catch((error) => {
      // Form Validation failed
      ElMessage.error(error)
    })
}
</script>

<style scoped></style>
